import React, { useState, useEffect ,useRef} from 'react';
import { Divider ,Button} from 'antd';
import * as echarts from 'echarts';
import './vipList.less'
import VipData from '@/components/VipData';
import { getVipSexApi} from '@/api/package/package'
import useStore from '@/store/index'


const HomePage: React.FC = () => {
  const chartRef = useRef(null);
  const userInfo = useStore<any>((state: any) => state.userInfo)
  const [sexData,setSexData] = useState({
    nan:2,
    nv:3,
    no:4,
  })
  useEffect(()=>{

     const chart = echarts.init(chartRef.current);
     const option = {
       // ECharts 配置项
       title: {
        text: '会员性别分布图',
        left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
       series: [
         {
           type: 'pie',
           data: [
             { value: sexData.nan, name: '男性会员' },
             { value: sexData.nv, name: '女性会员' },
             { value: sexData.no, name: '保密性别' },
           ],
         },
       ],
     };
    chart.setOption(option);
    // 注意：这里需要返回一个清理函数，以确保在组件卸载时销毁ECharts实例
    return () => {
      chart.dispose();
    };
  },[sexData])
  const getNewData = ()=>{
    let params = {
      belongToShop:userInfo.storeId

    }
     getVipSexApi(params).then((res:any)=>{
      console.log(res.sexData);
      setSexData(res.sexData)
     })
  }
  return (
    <div style={{ width: '100%', height: '800px' }}>
      <VipData></VipData>
      <Divider />

        <div ref={chartRef} style={{ width: '100%', height: '40%' }}></div>

      <Button onClick={getNewData}>获取最新数据</Button>
    </div>

  );
};

export default HomePage;